<html>

<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="js/easyui-1.3.5/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="js/easyui-1.3.5/themes/icon.css" />
<script src="js/easyui-1.3.5/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/easyui-1.3.5/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/tree.js" type="text/javascript" charset="utf-8"></script>
</head>

<body class="easyui-layout">
<!-- 西部区域 -->
<div region="west" split="true" title="导航菜单" style="width:230px;padding:10px">
  <!--树形菜单-->
  <ul id="tree"></ul>
</div>
<!-- 中部区域 -->
<div region="center" title="旷世人脸识别回调CRM和配置">
  <div id="tabs" class="easyui-tabs" fit="true" border="false">
  </div>
</div>
</body>
<script type="text/javascript">
window.onload = function() {
  init();
}

function init() {
  initTree();
}

function initTree() {
  //实例化树形菜单
  $("#tree").tree({
    data: treeData,
    lines: true,
    onClick: function(node) {
      if(node.attributes) {
        var iframe = getIFrame(node.attributes.url);
        addTab(node.text, iframe);
      }
    }
  });
  $("tree").tree("collapseAll");
}

function getIFrame(url) {
  return '<iframe width="100%" height="100%" frameborder="0" src="' + url + '" style="width:100%;height:100%; margin:0px 0px;"></iframe>'
}

function addTab(title, content) {
  if($("#tabs").tabs("exists", title)) {
    $("#tabs").tabs("select", title);
  } else {
    $("#tabs").tabs("add", {
      title: title,
      closable: true,
      content: content,
    });
  }
}
</script>

</html>